<template>
<view class="contaniner" style="padding: 0 30rpx;">
	<view v-for="(item,index) in groups" :key="index" style="display:flex;width: 100%;">
		<checkbox-group @change="checkClick(item)" style="display:flex;align-items: center;width: 10%;">
							<checkbox :checked="item.selected" />
						</checkbox-group>
		<view style="width: 80%;">
			<view class="card-item">
					<view class="card-top-box">
						<view class="orderid">
							批次号：CG4534857845213243245
						</view>
					</view>
					<view class="card-content-box">
						<view class="content-box">
							<view class="item-box">
								<view class="title">
									物料：
								</view>
								<view class="value">
			
								</view>
							</view>
						</view>
						<view class="content-box">
							<view class="item-box">
								<view class="title">
									物料编号：
								</view>
								<view class="value" style="color:black;">
									1462735824923459
								</view>
							</view>
						</view>
						<view class="content-box">
							<view class="item-box">
								<view class="title">
									仓库：
								</view>
								<view class="value">
									收货区
								</view>
							</view>
						
						</view>
						<view class="content-box">
							<view class="item-box">
								<view class="title">
									库位：
								</view>
								<view class="value">
									东方红
								</view>
							</view>
						</view>
						<view class="content-box" style="border-bottom:#eee 2rpx solid">
						<view class="item-box">
							<view class="title">
								数量：
							</view>
							<view class="value">
								东方红
							</view>
						</view>
						</view>
						<view class="content-box" style="display: flex;flex-direction: column;margin-top:15rpx;">
							<view class="item-box">
								<view class="title">
									备注1：
								</view>
								<input class="iptStyle" placeholder="请输入备注信息(非必填)" placeholder-style="color:#99999" />
							</view>
							<view class="item-box">
								<view class="title">
									备注2：
								</view>
								<input class="iptStyle" placeholder="请输入备注信息(非必填)" placeholder-style="color:#99999" />
							</view>
						</view>
						<view class="content-bottom">
							<button style="background: #455DA3;font-size: 24rpx; color: white;width: 160rpx;height: 60rpx;">绑定容器</button>
						</view>
					</view>
				</view>
		</view>				
				
	</view>
	<view class="footer">
	<view class="opt">
	   <checkbox-group @tap="checkAll">
	   					<checkbox :selected="selectAllStatus" />
	  </checkbox-group>
	        <text class="">全选</text>
	</view>
	 <view class="Scan">保存备注</view>
	 <button class="submit" @click="submit">批量打印批次二维码</button>
	</view>	
</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	export default {
		data() {
			return {
				pageId:'',
			groups:[
			  {id:2,selected:false},
			],
			selectAllStatus:false
 
			}
		},
		updated(option) {
			
			this.pageId=option.id
			console.log('this.pageId===>',this.pageId)
		},
		mounted() {
			this.packList()
		},
		methods: {
			packList(){
				api.holderList(this.pageId).then(res => {
					if (res.code == 0) {
						// this.submitId=res.data.id
					}
					})
			},
			
				// 单个商品的选择
				  			checkClick(item) {
				  				item.selected = !item.selected
				  				if (!item.selected) {
				  					this.selectAllStatus = false
				  				} else {
				  					// 判断每一个商品是否是被选择的状态
				  					const goods = this.groups.every(item => {
				  						return item.selected === true
										this.selectAllStatus=true
				  					})
				  					if (goods) {
				  						this.selectAllStatus = true
				  					} else {
				  						this.selectAllStatus = false
				  					}
				  				}
				  			},
					
				checkAll() {
							this.selectAllStatus = !this.selectAllStatus
							if (this.selectAllStatus) {
								this.groups.map(item => {
									item.selected = true
								})
							} else {
								this.groups.map(item => {
									item.selected = false
								})
							}
						},	
		}
	}
</script>

<style lang="scss" scoped>
	.opt{
	  display: flex;
	  align-items: center;
	   margin-top: 20rpx;
	}
	.Scan{ 
	width: 160rpx;
	height: 70rpx;
	color: white;
	background: #455da3;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25rpx;
	border-radius: 10rpx;
	}
	.submit{
	  width: 300rpx;
	height: 70rpx;
	color: white;
	background: #455da3;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 margin-top: 25rpx;
	 border-radius: 10rpx;
	 font-size: 28rpx;
	}
	.footer{
	  width: 100%;
	  height: 100rpx;
	  background: white;
	  position: fixed;
	  bottom: 0;
	  display: flex;
	  justify-content: space-around;
	  font-size: 28rpx;
	}
.content-bottom{
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
.iptStyle{
	width: 80%;
	height: 50rpx;
	background: #ccc;
	border-radius: 8rpx;
}
	.contaniner{
		width: 100%;
		height: 100vh;
		background: #fafbfb;
	}
	.card-item {
			box-shadow: 0 0 6rpx 3rpx #ccc;
			border-radius: 30rpx;
			background-color: white;
			overflow: hidden;
			margin-bottom: 20rpx;
			margin: 0 auto;
			width: 100%;
			.card-top-box {
				background-color: #455da3;
				color: white;
				font-size: 24rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				position: relative;
				.orderid {
					line-height: 80rpx;
					height: 80rpx;
				}

			}
	
			.card-content-box {
				padding: 20rpx 20rpx;
				box-sizing: border-box;
	
				.content-box {
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
	
					.item-box {
						display: flex;
						line-height: 60rpx;
	
						.title {
							color: #585858;
						}
	
						.value {
							color: #7567be;
						}
					}
				}
			}
		}
	.tab_nav{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.tab_nav  .navTitle {
			height: 90rpx;
			line-height: 90rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-family: Alibaba PuHuiTi;
			color: #333;
		}
		.active {
			position: relative;
			color: #333;
		}
		.active::after {
			content: "";
			position: absolute;
			width: 100rpx;
			height: 8rpx;
			background-color:  #FFC125;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		}


</style>
